import { useEffect } from "react";
import { Outlet } from "react-router-dom";
import { Layout, message } from "antd";
import { setAuthButtons } from "@/redux/modules/auth/action";
import { updateCollapse } from "@/redux/modules/menu/action";
import { getAuthorButtons } from "@/api/modules/login";
import { connect } from "react-redux";
import LayoutMenu from "./components/Menu";
import LayoutHeader from "./components/Header";
import LayoutTabs from "./components/Tabs";
import LayoutFooter from "./components/Footer";
import "./index.less";
import { useAppDispatch, useAppSelector } from "@/utils/hooks";
import { RootState } from "@/redux/index";
import { APP } from "@/redux/actionTypes";
import { setUserInfo } from "@/redux/modules/global/action";
import request from "@/utils/request";
import { loginResData } from "@/redux/reducers/app";
import { lsGetItem, lsSetItem } from "@/utils/util";
import { HOME_URL } from "@/config/config";

const LayoutIndex = (props: any) => {
	const { Sider, Content } = Layout;
	const { isCollapse, updateCollapse, setAuthButtons } = props;
	// 获取用户
	const dispatch = useAppDispatch();
	const { userInfo, currentEntity, entityIcon } = useAppSelector((state: RootState) => state.app);

	useEffect(() => {
		if (!userInfo.userId) {
			queryUserInfo();
		}
	}, [userInfo]);

	useEffect(() => {
		if (currentEntity.entityId) {
			queryEntityIcon();
			queryUserResources();
			// queryBrandList()
		}
	}, [currentEntity]);

	const queryUserInfo = () => {
		//
		dispatch({ type: APP.GET_USER_INFO })
		request("appGetUserInfo", {  }).then(res => {
			if (res.code === 0) {
				console.log(res.data);
				userInfo.userId = res.data.userId;
				userInfo.entityList = res.data.entityList;
				setUserInfo(res.data || {})
			}
		});

	};

	const queryUserResources = () => {
		dispatch({ type: APP.GET_USER_RESOURCES, payload: { entityId: currentEntity.entityId } });
	};

	const queryEntityIcon = () => {
		dispatch({ type: APP.GET_ENTITY_ICON, payload: { entityId: currentEntity.entityId } });
	};

	// 获取按钮权限列表
	const getAuthButtonsList = async () => {
		const { data } = await getAuthorButtons();
		setAuthButtons(data);
	};

	// 监听窗口大小变化
	const listeningWindow = () => {
		window.onresize = () => {
			return (() => {
				let screenWidth = document.body.clientWidth;
				if (!isCollapse && screenWidth < 1200) updateCollapse(true);
				if (!isCollapse && screenWidth > 1200) updateCollapse(false);
			})();
		};
	};

	useEffect(() => {
		listeningWindow();
		getAuthButtonsList();
	}, []);

	return (
		// 这里不用 Layout 组件原因是切换页面时样式会先错乱然后在正常显示，造成页面闪屏效果
		<section className="container">
			<Sider trigger={null} collapsed={props.isCollapse} width={220} theme="dark">
				<LayoutMenu></LayoutMenu>
			</Sider>
			<Layout>
				<LayoutHeader></LayoutHeader>
				<LayoutTabs></LayoutTabs>
				<Content>
					<Outlet></Outlet>
				</Content>
				<LayoutFooter></LayoutFooter>
			</Layout>
		</section>
	);
};

const mapStateToProps = (state: any) => state.menu;
const mapDispatchToProps = { setAuthButtons, setUserInfo, updateCollapse };
export default connect(mapStateToProps, mapDispatchToProps)(LayoutIndex);
